<!-- 饼状图（左） -->
<template>
  <div class="course-pie-chart">
    <div class="title">
      学员学段分布
    </div>
    <div class="pie-chart" ref="chart">

    </div>
  </div>
</template>

<script>
export default {
  props:['studentStage'],
  //图表实例
  mounted() {
    this.init()
  },
  methods: {
    init() {
      //2.基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: 'rgba(50,50,50,0.7)',
          valueFormatter: (value) => value,
          textStyle: {
            color: '#fefdfd'
          }
        },
        color:['#5bb0aa', '#c39755', '#d16056'],
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: this.studentStage,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 4.传入数据
      chart.setOption(option);

      // 在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
      window.onresize = function () {
        chart.resize()
      }
    }
  }
};
</script>


<style lang="less" scoped>
.course-pie-chart {
  width: 100%;
  height: 280px;
  background-color: #ffffff;

  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    padding-right: 30px;
    color: rgb(85, 85, 85);
    text-align: left;
    font-size: 14px;
  }

  .pie-chart {
    width: 100%;
    height: 240px;
  }
}
</style>